/**
 * 资金提现页面组件
 * 功能：展示和管理资金提现记录，包括提现统计、查询筛选、审批操作和详情查看
 * 特点：包含统计信息、查询功能、审批操作、状态标签和模拟数据展示
 * 技术：使用React函数组件、Ant Design UI组件、状态管理和模拟数据
 */

import React, { useState, useEffect } from 'react';
import {
  Card,
  Table,
  Button,
  Space,
  message,
  Tag,
  Row,
  Col,
  Statistic,
  DatePicker,
  Form,
  Input,
  Modal,
  Descriptions
} from 'antd';
import {
  ReloadOutlined,
  SearchOutlined,
  EyeOutlined,
  CheckOutlined,
  CloseOutlined
} from '@ant-design/icons';
import dayjs from 'dayjs';

const { RangePicker } = DatePicker;

/**
 * 提现记录接口定义
 * 描述资金提现申请的数据结构
 */
interface WithdrawRecord {
  id: number;                    // 记录唯一标识
  orderNo: string;               // 订单编号
  amount: number;                // 提现金额
  currency: string;              // 货币类型
  status: string;                // 状态：pending(审核中)、approved(已批准)、rejected(已拒绝)、completed(已完成)
  bankAccount: string;           // 银行账户（脱敏显示）
  bankName: string;              // 银行名称
  applicant: string;             // 申请人
  createdAt: string;             // 申请时间
  processedAt: string;           // 处理时间
  remark: string;                // 备注信息
}

/**
 * 资金提现主组件
 * React函数组件，使用FC（Function Component）类型定义
 */
const FundWithdraw: React.FC = () => {
  // 使用React的useState Hook管理组件状态
  const [loading, setLoading] = useState(false);              // 加载状态，控制表格加载动画
  const [modalVisible, setModalVisible] = useState(false);    // 详情模态框显示状态
  const [selectedRecord, setSelectedRecord] = useState<WithdrawRecord | null>(null); // 当前选中的提现记录
  const [records, setRecords] = useState<WithdrawRecord[]>([]);  // 提现记录列表数据

  // 查询参数状态
  const [queryParams, setQueryParams] = useState({
    dateRange: null as [dayjs.Dayjs | null, dayjs.Dayjs | null] | null, // 日期范围选择
    orderNo: '',     // 订单号搜索
    status: ''       // 状态筛选
  });

  /**
   * 模拟提现记录数据
   * 在实际应用中，这些数据应该从API接口获取
   */
  const mockRecords: WithdrawRecord[] = [
    {
      id: 1,
      orderNo: 'WTH202401200001',
      amount: 1000,
      currency: 'USD',
      status: 'approved',
      bankAccount: '****1234',
      bankName: '中国银行',
      applicant: '张三',
      createdAt: '2024-01-20T10:30:00Z',
      processedAt: '2024-01-20T11:30:00Z',
      remark: '日常提现'
    },
    {
      id: 2,
      orderNo: 'WTH202401190002',
      amount: 500,
      currency: 'USD',
      status: 'pending',
      bankAccount: '****5678',
      bankName: '工商银行',
      applicant: '李四',
      createdAt: '2024-01-19T14:20:00Z',
      processedAt: '',
      remark: '紧急用款'
    },
    {
      id: 3,
      orderNo: 'WTH202401180003',
      amount: 2000,
      currency: 'USD',
      status: 'rejected',
      bankAccount: '****9012',
      bankName: '建设银行',
      applicant: '王五',
      createdAt: '2024-01-18T09:15:00Z',
      processedAt: '2024-01-18T10:15:00Z',
      remark: '金额过大'
    }
  ];

  /**
   * 获取提现记录数据
   * 模拟API调用，使用setTimeout模拟网络请求延迟
   */
  const fetchWithdrawRecords = async () => {
    setLoading(true); // 开始加载，显示加载动画
    try {
      // 模拟API调用，实际项目中应替换为真实的API请求
      setTimeout(() => {
        setRecords(mockRecords); // 设置提现记录数据
        setLoading(false);       // 加载完成，隐藏加载动画
      }, 500);
    } catch (error) {
      console.error('获取提现记录失败:', error);
      message.error('获取提现记录失败'); // 显示错误提示
      setLoading(false);
    }
  };

  /**
   * 显示提现记录详情
   * @param record 选中的提现记录对象
   */
  const showDetail = (record: WithdrawRecord) => {
    setSelectedRecord(record);    // 设置选中的记录
    setModalVisible(true);        // 打开详情模态框
  };

  /**
   * 处理批准操作
   * 模拟审批通过操作
   * @param record 要批准的提现记录
   */
  const handleApprove = (record: WithdrawRecord) => {
    // 模拟批准操作，实际应调用API接口
    message.success(`已批准提现申请 ${record.orderNo}`);
    fetchWithdrawRecords(); // 重新加载数据，刷新界面
  };

  /**
   * 处理拒绝操作
   * 模拟审批拒绝操作
   * @param record 要拒绝的提现记录
   */
  const handleReject = (record: WithdrawRecord) => {
    // 模拟拒绝操作，实际应调用API接口
    message.error(`已拒绝提现申请 ${record.orderNo}`);
    fetchWithdrawRecords(); // 重新加载数据，刷新界面
  };

  /**
   * 使用useEffect Hook在组件挂载时获取数据
   * 空依赖数组[]表示只在组件首次渲染时执行
   */
  useEffect(() => {
    fetchWithdrawRecords();
  }, []);

  /**
   * 表格列配置
   * 定义表格的列显示、渲染方式和操作按钮
   */
  const columns = [
    {
      title: '订单号',
      dataIndex: 'orderNo',
      key: 'orderNo'
    },
    {
      title: '金额',
      dataIndex: 'amount',
      key: 'amount',
      // 自定义渲染，显示金额和货币类型，加粗显示
      render: (amount: number, record: WithdrawRecord) => (
        <span style={{ fontWeight: 'bold' }}>
          {amount} {record.currency}
        </span>
      )
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      // 状态标签渲染，根据状态显示不同颜色
      render: (status: string) => {
        const statusConfig: { [key: string]: { color: string; text: string } } = {
          pending: { color: 'orange', text: '审核中' },
          approved: { color: 'green', text: '已批准' },
          rejected: { color: 'red', text: '已拒绝' },
          completed: { color: 'blue', text: '已完成' }
        };
        const config = statusConfig[status] || { color: 'default', text: status };
        return <Tag color={config.color}>{config.text}</Tag>;
      }
    },
    {
      title: '银行账户',
      dataIndex: 'bankAccount',
      key: 'bankAccount'
    },
    {
      title: '申请人',
      dataIndex: 'applicant',
      key: 'applicant'
    },
    {
      title: '申请时间',
      dataIndex: 'createdAt',
      key: 'createdAt',
      // 格式化时间显示
      render: (text: string) => new Date(text).toLocaleString()
    },
    {
      title: '操作',
      key: 'action',
      // 操作列渲染，包含详情、批准、拒绝按钮
      render: (_: unknown, record: WithdrawRecord) => (
        <Space>
          {/* 详情按钮 */}
          <Button
            type="link"
            size="small"
            icon={<EyeOutlined />}
            onClick={() => showDetail(record)}
          >
            详情
          </Button>
          {/* 只有审核中状态显示批准和拒绝按钮 */}
          {record.status === 'pending' && (
            <>
              <Button
                type="link"
                size="small"
                icon={<CheckOutlined />}
                onClick={() => handleApprove(record)}
                style={{ color: 'green' }}
              >
                批准
              </Button>
              <Button
                type="link"
                size="small"
                icon={<CloseOutlined />}
                onClick={() => handleReject(record)}
                style={{ color: 'red' }}
              >
                拒绝
              </Button>
            </>
          )}
        </Space>
      )
    }
  ];

  return (
    <div className="p-6">
      <Card>
        {/* 统计信息卡片区域 */}
        <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
          <Col span={6}>
            <Card>
              <Statistic
                title="总提现金额"
                value={records.reduce((sum, record) => sum + record.amount, 0)}
                precision={2}
                valueStyle={{ color: '#cf1322' }} // 红色显示
                prefix="$"
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="待审核"
                value={records.filter(r => r.status === 'pending').length}
                valueStyle={{ color: '#faad14' }} // 橙色显示
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="已批准"
                value={records.filter(r => r.status === 'approved').length}
                valueStyle={{ color: '#52c41a' }} // 绿色显示
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="已拒绝"
                value={records.filter(r => r.status === 'rejected').length}
                valueStyle={{ color: '#ff4d4f' }} // 红色显示
              />
            </Card>
          </Col>
        </Row>

        {/* 查询表单区域 */}
        <Card style={{ marginBottom: 16 }}>
          <Form layout="inline">
            <Form.Item label="时间范围">
              <RangePicker
                value={queryParams.dateRange}
                onChange={(dates) => setQueryParams(prev => ({ ...prev, dateRange: dates }))}
              />
            </Form.Item>
            <Form.Item label="订单号">
              <Input
                placeholder="请输入订单号"
                value={queryParams.orderNo}
                onChange={(e) => setQueryParams(prev => ({ ...prev, orderNo: e.target.value }))}
              />
            </Form.Item>
            <Form.Item>
              <Space>
                <Button type="primary" icon={<SearchOutlined />}>
                  查询
                </Button>
                <Button icon={<ReloadOutlined />} onClick={fetchWithdrawRecords}>
                  刷新
                </Button>
              </Space>
            </Form.Item>
          </Form>
        </Card>

        {/* 提现记录表格 */}
        <Table
          loading={loading}           // 加载状态
          columns={columns}           // 列配置
          dataSource={records}        // 数据源
          rowKey="id"                 // 行唯一标识
          pagination={{               // 分页配置
            pageSize: 10,
            showSizeChanger: true,    // 显示每页条数选择器
            showQuickJumper: true,    // 显示快速跳转
            showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条`
          }}
        />

        {/* 详情模态框 */}
        <Modal
          title="提现申请详情"
          open={modalVisible}
          onCancel={() => setModalVisible(false)}
          footer={[
            <Button key="close" onClick={() => setModalVisible(false)}>
              关闭
            </Button>
          ]}
          width={600}
        >
          {selectedRecord && (
            <Descriptions bordered column={1}>
              <Descriptions.Item label="订单号">{selectedRecord.orderNo}</Descriptions.Item>
              <Descriptions.Item label="金额">
                {selectedRecord.amount} {selectedRecord.currency}
              </Descriptions.Item>
              <Descriptions.Item label="状态">
                <Tag color={
                  selectedRecord.status === 'approved' ? 'green' :
                  selectedRecord.status === 'pending' ? 'orange' : 'red'
                }>
                  {selectedRecord.status === 'approved' ? '已批准' :
                   selectedRecord.status === 'pending' ? '审核中' : '已拒绝'}
                </Tag>
              </Descriptions.Item>
              <Descriptions.Item label="银行名称">{selectedRecord.bankName}</Descriptions.Item>
              <Descriptions.Item label="银行账户">{selectedRecord.bankAccount}</Descriptions.Item>
              <Descriptions.Item label="申请人">{selectedRecord.applicant}</Descriptions.Item>
              <Descriptions.Item label="申请时间">
                {new Date(selectedRecord.createdAt).toLocaleString()}
              </Descriptions.Item>
              {selectedRecord.processedAt && (
                <Descriptions.Item label="处理时间">
                  {new Date(selectedRecord.processedAt).toLocaleString()}
                </Descriptions.Item>
              )}
              <Descriptions.Item label="备注">{selectedRecord.remark}</Descriptions.Item>
            </Descriptions>
          )}
        </Modal>
      </Card>
    </div>
  );
};

export default FundWithdraw;